added caching and video player

1 files changed, 59 insertions, 0 deletions

diff --git a/src/app/kdrama/[id]/buttons.jsx b/src/app/kdrama/[id]/buttons.jsx
new file mode 100644
index 0000000..8ec633f
--- /dev/null
+++ b/src/app/kdrama/[id]/buttons.jsx
@@ -0,0 +1,59 @@
+"use client";
+import styles from "../styles/info.module.css";
+import getVideoLink from "../components/videoLink";
+import React, { useState } from "react";
+import { MediaPlayer, MediaProvider } from "@vidstack/react";
+import "@vidstack/react/player/styles/base.css";
+import "@vidstack/react/player/styles/plyr/theme.css";
+import {
+	PlyrLayout,
+	plyrLayoutIcons,
+} from "@vidstack/react/player/layouts/plyr";
+
+export default function EpisodesButtons({ data: episodeData, id: dramaId }) {
+	const [videoLink, setVideoLink] = useState(null);
+	const [episode, setEpisode] = useState("");
+
+	async function test(a, b, episodeText) {
+		let link = await getVideoLink(a, b);
+		setVideoLink(link);
+		setEpisode(episodeText);
+	}
+
+	return (
+		<div>
+			<div className={styles.EpisodesContainer}>
+				<h2>Episodes</h2>
+				<div className={styles.EpisodeButtons}>
+					{episodeData &&
+						episodeData.map((item, index) => (
+							<button
+								key={index}
+								onClick={() =>
+									test(item.id, dramaId, item.title)
+								}
+							>
+								{item.title}
+							</button>
+						))}
+				</div>
+			</div>
+			{videoLink && (
+				<div className={styles.VideoContainer}>
+					<MediaPlayer
+						title="dramaPlayer"
+						src={videoLink}
+						aspectRatio="16/9"
+						load="eager"
+						className={styles.VideoPlayer}
+						playsInline
+					>
+						<MediaProvider />
+						<PlyrLayout icons={plyrLayoutIcons} />
+					</MediaPlayer>
+					<p>{episode.toUpperCase()}</p>
+				</div>
+			)}
+		</div>
+	);
+}